<template>
    <div>
        <el-container>
            <el-header>
                <el-form style="text-align: end; margin-top: 1.5rem;">
                    <el-button
                        type="primary"
                        @click="exportExcel()">
                        导出EXCEL
                    </el-button>
                </el-form>
            </el-header>
            <el-divider></el-divider>
            <el-main>
                <el-table :data="tableData" stripe id="autoTable">
                    <el-table-column
                        type="index">
                    </el-table-column>
                    <el-table-column v-for="item in headData" :key="item.key" align="center" :label="item.label" :prop="item.key"></el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    export default {
        name: "AutoTable",
        props: {
            tableData: {
                type: Array
            },
            headData: {
                type: Array
            },
            tableName: {
                type: String
            }
        },
        methods: {
            exportExcel() {
                let _that = this;
                let wb = XLSX.utils.table_to_book(document.querySelector('#autoTable'));

                let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), _that.tableName + '.xlsx')
                } catch (e) {
                    if (typeof console !== 'undefined') {
                        console.log(e, wbout)
                    }
                }
                return wbout
            }
        }
    }
</script>

<style scoped>

</style>
